<template>
<div>
  <h1>配置参数</h1>
  <table>
    {{names}}
    {{values}}
    {{typevalues}}
    <tr v-for='(i,index) in list' :key="i.id">
      <td><van-field :label='i.label' v-model='names[index]'/></td>
      <td>
        <select v-model='typevalues[index]'>
          <option value="input">输入框</option>
          <option value="radio">单选框</option>
          <option value="checkbox">多选框</option>
          <option value="select">下拉框</option>
          <option value="datetime">日期</option>
          <option value="file">文件</option>
        </select>
      </td>
      <td>
        <van-field label='值' v-model='values[index]'/>
        <van-button @click='getsource(index)'>选择数据源</van-button>
      </td>
    </tr>
  </table>
  <van-button @click='add'>+</van-button>
  <van-button @click='submit'>提交</van-button>
  <el-dialog v-model="dialogTableVisible" title="Shipping address">
    <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />

      <el-table-column property="name" label="Name" width="120" />
    </el-table>
  </el-dialog>

</div>
</template>

<script>
import maxios from "../../http/axios";

export default {
  name: "canshu",
  data(){
    return{
      id:this.$route.query.id,
      list:[{'label':'名称'}],
      names:{},
      typevalues:{},
      values:{},
      dialogTableVisible:false,
      gridData:[{'id':1,'name':'请假类型数据源'},{'id':2,'name':'会议地址数据源'}],
      tableData: [],
    }
  },
  methods:{
    add(){
      this.list.push({'label':'名称'})
    },
    submit(){
      //获取输入的所有值
      let tlist=[]
      for(var i=0;i<this.list.length;i++){
        let dict = {'lable':this.names[i],'type':this.typevalues[i],'values':this.values[i]}
        tlist.push(dict)
      }
    },
    //添加数据源
    getsource(index){
      localStorage.setItem('index',index)
      maxios('user/show_table','get').then(res=>{
        this.tableData = res.data.list
      })
      this.dialogTableVisible=true
    },
    handleCurrentChange(val) {
      this.dialogTableVisible=false
      let index = localStorage.getItem('index')
      this.values[index] = JSON.stringify(val['mes'])

    },
  },
  mounted() {
    this.getsource()
  }
}
</script>

<style scoped>

</style>